<!DOCTYPE html>
<html lang="en" class="no-js">

<head>

    <meta charset="utf-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- CSS -->
    <link rel="stylesheet" href="assets/css/reset.css">
    <link rel="stylesheet" href="assets/css/supersized.css">
    <link rel="stylesheet" href="assets/css/style.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5.js"></script>
    <![endif]-->

</head>

<body>

<div class="page-container">
    <h1>登录</h1>

    <form id="form" action="/hello.html" method="get">
        <input type="text" name="username" class="username" placeholder="请输入您的用户名！">
        <input type="password" name="password" class="password" placeholder="请输入您的密码！">

        <div>
            <div style="float: left">
                <input type="captcha" class="captcha" name="captcha" placeholder="请输入验证码！">
            </div>
            <div style="float: left">
                <img src="/code/captcha?" class="kaptchaImage" id="kaptchaImage" title="看不清楚？换一张" alt="验证码"/>
            </div>
        </div>

        <button type="button" class="submit_button" onclick="login()">登录</button>
    </form>
</div>

<!-- Javascript -->
<script src="assets/js/jquery-1.8.2.min.js"></script>
<script src="assets/js/supersized.3.2.7.min.js"></script>
<script src="assets/js/supersized-init.js"></script>
<script src="assets/js/scripts.js"></script>

<script language="JavaScript">
    $(function () {
        $('#kaptchaImage').click(function () {//生成验证码
            $(this).hide().attr('src', '/code/captcha?' + Math.floor(Math.random() * 100)).fadeIn();
        })
    });

    function login() {
        $.ajax({
            type: "post",
            url: "spring/boot/login_check",
            data: $('#form').serialize(),
            success: function (data) {
                if (data.code != "0") {
                    if (data.code == "1") {
                        document.all("username").placeholder = data.msg;
                    } else if (data.code == "2" || data.code == "3") {
                        document.all("password").value = "";
                        document.all("password").placeholder = data.msg;
                    } else if (data.code == "4" || data.code == "5") {
                        document.all("captcha").value = "";
                        document.all("captcha").placeholder = data.msg;
                    }
                } else {
                    $("form").submit();
                }
            }
        })
    }

</script>

</body>
</html>

